<template>
  <div class="app">
    <h1>当前计数为: {{ counter }}</h1>
    <h1>双倍快乐: {{ doubleCounter }}</h1>
    <button @click="increment">+</button>
    <hr />
    <Child></Child>
  </div>
</template>
<script setup>
// import { ref, computed } from 'vue';
// export default {
//   data() {
//     return {
//       counter: 100,
//     };
//   },
//   methods: {
//     increment() {
//       this.counter++;
//     },
//   },
//   computed: {
//     doubleCounter() {
//       return this.counter * 2;
//     },
//   },
// };

// const counter = ref(100);
// const increment = () => {
//   counter.value++;
// };
// const doubleCounter = computed(() => counter.value * 2);

import useCounter from '@/hooks/useCounter';
import Child from './Child.vue';
const { counter, increment, doubleCounter } = useCounter(0);
counter.value = 2000;
</script>
<style lang="scss" scoped></style>
